<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue-router.js"></script>

    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .box{
            width:400px;
            height: 400px;
            border:1px solid darkgoldenrod;
            border-radius: 10px;
            overflow: auto;
            padding: 10px;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .slot{
            width:50%;
            margin-top: 20px;
            border: 1px solid darkmagenta;
            border-radius: 10px;
            padding:30px;
        }
        .router-link-exact-active ,.router-link-active {
            padding:5px;
            border-radius: 5px;
            background: darkorange;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <m-head></m-head>
        <hr>
        <h2>路由Demo</h2>
        <div class="box">
            <!-- 5. 路由出口  告诉vue 在哪里加载路由组件  -->       
            <router-view></router-view>
        </div>

        <div>
            <!-- 6. 路由导航  路由跳转   -->
            <router-link to="/home?id=2116&name=ZKL">首页</router-link>
            <router-link to="/user/zuozuomu/tech/daydayup?role=3&age=30#三阶段">用户-ZKL</router-link>
            <router-link to="/user/laoyu/tech/这不简单吗?role=2&age=35#二阶段">用户-老余</router-link>
            <!-- <router-link to="/user/lili/tech/这个我们很优秀?role=1&age=24#一阶段">用户-丽丽</router-link> -->

            <router-link :to="{name:'user',hash:'#一阶段',query:{role:1,age:24},params:{name:'lili',word:'这个我们很优秀'}}">用户-丽丽</router-link>


            <!-- <router-link to="/user?role=1&age=30">用户</router-link> -->
            <router-link to="/list">商品</router-link>
            <router-link :to="{name:'list'}">商品2</router-link>
            <router-link to="/good" >商品 -别名</router-link>
            <router-link to="/mine/东湖/week" >我的1</router-link>
            <router-link :to="{name:'mine',params:{area:'武汉',who:'全体2116'}}">我的3</router-link>
            <router-link :to="{name:'mine',params:{area:'回老家',who:'亲戚'}}" >我的2</router-link>
            <router-link :to="{name:'login'}">登录 - 登录 </router-link>
            <router-link to="/login/admin">管理员登录  </router-link>

        </div>
    </div>


    <template id="home">
        <div>
            <h2>home - Home - 2 </h2>
            <h2>id -- {{$route.query.id }}</h2>
            <h2>name -- {{$route.query.name}}</h2>
        </div>
    </template>


    <template id="list">
        <div>
            <h2>list - list - 商品列表</h2>
        </div>
    </template>

    <template id="user">
        <div>
            <h2>User  - User -  用户管理 </h2>
            <h2>查询查询  query (?)</h2>
            <h2>role === {{$route.query.role }}</h2>
            <h2>age == {{$route.query.age }}</h2>
            <h2>params</h2>
            <h2>name --- {{$route.params.name }}</h2>
            <h2>word --- {{$route.params.word }}</h2>
            <hr>
            <h2> $route 路由信息对象 </h2>
            <h2> query  查询参数 ? </h2>
            <h2> params 路由参数 : </h2>
            <h2> 命名路由  name =  {{$route.name }}</h2>
            <h2> 路径  path = {{$route.path}}</h2>
            <h2> hash = {{ $route.hash}}</h2>
            <h2> fullPath = {{ $route.fullPath}}</h2>
            <h2> meta  = {{$route.meta }}</h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>mine - mine - 个人中心 </h2>
            <h2>路由查收 params (:)</h2>
            <h2> area == {{$route.params.area }}</h2>
            <h2> who == {{$route.params.who }}</h2>

        </div>
    </template>

    <template id="login">
        <div>
            <h2>login  - login - login </h2>
        </div>
    </template>



    <script>
        // 全局注册
        const bus = new Vue()   // $emit $on $once 
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

        // 1. 定义 (路由) 组件。
        const Home = {
            template:"#home"
        }
        const List = {
            template:'#list',
        }
        const User = {
            template:"#user"
        }
        const Mine = {
            template:"#mine"
        }
        const NotFound = {
            template:"<h2>404 - 404  - NotFOund </h2>"
        }
        const Login = {
            template:"#login"
        }

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        const routes = [
            {
                path:"/",
                redirect:{
                    name:"home"
                }
            },
            {path:"/home",component:Home,name:"home"},
            {path:"/list",alias:"/good",component:List,name:"list"},
            {path:"/user/:name/tech/:word?"  ,component:User,name:"user",meta:{
                day:'0401',
                phone:"18012341234"
            }},
            {path:"/mine/:area/week/:who?",component:Mine,name:"mine"},
            {
                path:'/login/admin',
                component:{
                    template:"<h2>Admin - Admin - ADmin  管理员登录  </h2>"
                },
                name:'admin'
            },
            {
                path:'/login/:name',
                component:Login,
                name:'login'
            },
           
            {
                path:"/404",
                component:NotFound,
                name:'notFound'
            },
            {
                path:"*",
                redirect:'/404'
            }

        ]


        // 3. 创建路由对象 然后传 `routes` 配置
        const router = new VueRouter({
            routes 
        })

        // 4. 挂载全局的根实例对象 
        const vm = new Vue({
            router,  // this.$router 
            data:{
                title:"Vue  路由传参  (动态路由 ) ",
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
                console.log(this.$router)  // 全局的路由对象 负责路由跳转 路由显示 
                console.log(this.$route)   // 当前激活的路由信息  可以获取相关的路由参数的  
            }
        }).$mount("#app")
    </script>
    
     <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     
        
        $route  路由对象属性    
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变  
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  

        router-link 的 高亮 path  
     -->

</body>
</html>


